<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>
<html>
<head>
<link rel="stylesheet" href="/css/jquery.autocomplete.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/yaodian100_header_v5.css" type="text/css" />
<link rel="stylesheet" href="/css/yaodian100_reg_v2.css" type="text/css" />
<link rel="stylesheet" href="/css/mgm_111128.css" type="text/css" />
<script type="text/javascript" charset="UTF-8" src="/js/jquery.alphanumeric.js?v=<%=ServerValue.getInitialDate()%>"></script>
<script type="text/javascript" charset="UTF-8" src="/js/mreg.js?v=<%=ServerValue.getInitialDate()%>"></script>
<script type="text/javascript" charset="UTF-8" src="/js/mail.autocomplete.js?v=<%=ServerValue.getInitialDate()%>"></script>
<script language="javascript">
var isCorrect = true;
var loginIdOk;
var mobileOk;
var mailOk;
var codeOk;
var maildomain =  ["@163.com","@qq.com","@126.com","@hotmail.com","@gmail.com","@sohu.com","@yahoo.cn","@139.com","@wo.com.cn","@189.cn"];
$().ready(function(){
	$("#mobile").numeric();
	$("#iv").attr("src","<%=ServerValue.getFrontContextPath()%>/servlet/imageValid.jpg?"+Math.random());
	$("#reg_dialog").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 150,
		width:350,
		modal: true
	});
	
	if("${regresult}" == "code_error"){
		$("#codeTip").show();
		$("#codeTip").html("验证码错误，请重新输入");
	}
	if("${regresult}" == "id_exist"){
		$("#loginIDTip").show();
		$("#loginIDTip").html("该帐户名已被使用");
	}
	if("${regresult}" == "mobile_exist"){
		$("#mobileTip").show();
		$("#mobileTip").html("此手机号码已注册，请改用其他手机号码注册或用该手机号码<a href='<%=ServerValue.getFrontContextPath()%>/tologin.do'>登录</a>");
	}
	if("${regresult}" == "mail_exist"){
		$("#mailTip").show();
		$("#mailTip").html("该邮箱已被使用");
	}
	if("${regresult}" == "pwd_error"){
		$("#rcpwdTip").html("两次密码不同");
		$("#rcpwdTip").show();
	}

	$("#loginID").focus(function(){
		$(":strong[class*=ipt-w20]").eq(0).attr('class','ipt-w20 on-f');
	}).blur(function(){
		$(":strong[class*=ipt-w20]").eq(0).attr('class','ipt-w20');
		checkLoginId();
	});
	$("#mobile").focus(function(){
		$(":strong[class*=ipt-w20]").eq(1).attr('class','ipt-w20 on-f');
	}).blur(function(){
		$(":strong[class*=ipt-w20]").eq(1).attr('class','ipt-w20');
		checkMobile();
	});
	$("#mail").focus(function(){
		$(":strong[class*=ipt-w20]").eq(2).attr('class','ipt-w20 on-f');
	}).blur(function(){
		$(":strong[class*=ipt-w20]").eq(2).attr('class','ipt-w20');
		checkMail();
	});
	$("#mail").mailautocomplete(maildomain,{
		matchContains:true, 
		matchEmail:true,
		matchSubset:false,
		minchars:1,
		formatItem: function(data, term, term2, term3, term4) {     
			return term4.split("@")[0] +data[0];
		},
		formatResult: function(data) {
			return data[0];
		},
		formatMatch: function(data) {
			return data[0];
		}
	}).result(function(e, item) {
		$("#mail").val(item);
		checkMail();
	});
	$("#pwd").focus(function(){
		$(":strong[class*=ipt-w20]").eq(3).attr('class','ipt-w20 on-f');
	}).blur(function(){
		$(":strong[class*=ipt-w20]").eq(3).attr('class','ipt-w20');
		checkPwd();
	});
	$("#rcpwd").focus(function(){
		$(":strong[class*=ipt-w20]").eq(4).attr('class','ipt-w20 on-f');
	}).blur(function(){
		$(":strong[class*=ipt-w20]").eq(4).attr('class','ipt-w20');
		reCheckPwd();
	});
	$("#ccode").focus(function(){
		$(":strong[class*=ipt-w20]").eq(5).attr('class','ipt-w20 on-f');
	}).blur(function(){
		$(":strong[class*=ipt-w20]").eq(5).attr('class','ipt-w20');
		checkCode();
	});
	$("#pwd").keyup(function(){pwdStrongCheck($("#pwd").val());});

	$("#submit_data").click(function(){
		isCorrect = true;	
		if(null==loginIdOk){	
			checkLoginId();
		}else if(false==loginIdOk){
			isCorrect = false;
		}
		if(null==mobileOk){	
			checkMobile();
		}else if(false==mobileOk){
			isCorrect = false;
		}
		if(null==mailOk){
			checkMail();
		}else if(false==mailOk){
			isCorrect = false;
		}
		checkPwd();
		reCheckPwd();
		if(null==codeOk){
			checkCode();
		}else if(false==codeOk){
			isCorrect = false;
		}
		if(isCorrect){
			if($("#is_read").attr('checked')){
				$("#memberForm").submit();
				return false;
			}else{
				$("#reg_dialog").dialog('open');
			}
		}
		return false;
	});

	$("#chang_image").click(function(){
		$("#iv").attr("src","<%=ServerValue.getFrontContextPath()%>/servlet/imageValid.jpg?"+Math.random());
		if(($("#ccode").attr('value') != "")){
			$("#codeTip").html("验证码错误，请重新输入");
			$("#codeTip").show();
			codeOk = false;
		}
	});
	
	$("#reg_dialog_commit").click(function(){
		$("#reg_dialog").dialog('close');
	});	
});
function checkMobile(){
	mobileOk = false;
	$("#mobileTip").hide();
	var text = $("#mobile").attr('value');
	if(text.length==0){
		$("#mobileTip").html("请输入手机号码");
		$("#mobileTip").show();
		isCorrect = false;
	}else if(text.length!=11){
		$("#mobileTip").html("手机号码格式错误");
		$("#mobileTip").show();
		isCorrect = false;
	}else {
		$.post("<%=ServerValue.getFrontContextPath()%>/checkRegData.do",{c_id:4,mobile:text},
				function callback(result){
					if(result=='exist'){
						$("#mobileTip").html("此手机号码已注册，请改用其他手机号码注册或用该手机号码<a href='<%=ServerValue.getFrontContextPath()%>/tologin.do'>登录</a>");
						$("#mobileTip").show();
						isCorrect = false;
					}else{
						mobileOk = true;
					}
				},
				"json");
	}
}
function checkLoginId(){
	loginIdOk = false;
	$("#loginIDTip").hide();
	$("#loginID").val(jQuery.trim($("#loginID").val()).toLowerCase());
	var text = $("#loginID").attr('value');
	var idlength=text.length+chineseCount(text);  
	if(idlength==0){
		$("#loginIDTip").html("帐户名不能空白");
		$("#loginIDTip").show();
		isCorrect = false;
	}else if(idlength<4||idlength>20){
		$("#loginIDTip").html("帐户名长度不符规定");
		$("#loginIDTip").show();
		isCorrect = false;
	}else if(isAllNum(text)){
		$("#loginIDTip").html("帐户名不能全为数字");
		$("#loginIDTip").show();
		isCorrect = false;
	}else if(text.indexOf(' ')>=0){
		$("#loginIDTip").html("帐户名不能含有空白");
		$("#loginIDTip").show();
		isCorrect = false;
	}else if(text.match(/^[\u0391-\uFFE5\w]+$/)==null){
		$("#loginIDTip").html("只能使用小写英文字母、中文、数字");
		$("#loginIDTip").show();
		isCorrect = false;
	}else {
		$.post("<%=ServerValue.getFrontContextPath()%>/checkRegData.do",{c_id:1,loginID:text},
				function callback(result){
					if(result=='exist'){
						$("#loginIDTip").html("帐户名已被使用");
						$("#loginIDTip").show();
						isCorrect = false;
					}else{
						loginIdOk = true;
					}
				},
				"json");
	}
}
function checkMail(){
	mailOk = false;
	$("#mailTip").hide();
	$("#mail").val(jQuery.trim($("#mail").val()).toLowerCase());
	var text = $("#mail").attr('value');
	if($("#mail").val() == ""){
		$("#mailTip").html("请输入邮箱");
		$("#mailTip").show();
		isCorrect = false;
	}else if($("#mail").val().match(/.+@.+\..+/)==null || $("#mail").val().indexOf(' ')>=0 || chineseCount($("#mail").val())>0){
		$("#mailTip").html("邮箱格式错误");
		$("#mailTip").show();
		isCorrect = false;
	}else {
		$.post("<%=ServerValue.getFrontContextPath()%>/checkRegData.do",{c_id:2,mail:text},
				function callback(result){
					if(result=='exist'){
						$("#mailTip").html("该邮箱已被使用");
						$("#mailTip").show();
						isCorrect = false;
					}else{
						mailOk = true;
					}
				},
				"json");
	}
}
function checkPwd(){
	$("#pwdTip").hide();
	var text = $("#pwd").attr('value');
	if(text.length==0){
		$("#pwdTip").html("请输入密码");
		$("#pwdTip").show();
		isCorrect = false;
	}else if(text.length<6||text.length>16){
		$("#pwdTip").html("密码长度只能在6-16位字符之间");
		$("#pwdTip").show();
		isCorrect = false;
	}else if(text.indexOf(' ')>=0){
		$("#pwdTip").html("密码不能含有空白");
		$("#pwdTip").show();
		isCorrect = false;
	}else if(text.match(/[^a-zA-Z0-9]/g)){
		$("#pwdTip").html("只能使用大小写英文字母、数字");
		$("#pwdTip").show();
		isCorrect = false;
	}
}
function reCheckPwd(){
	$("#rcpwdTip").hide();
	var text = $("#pwd").attr('value');
	if($("#rcpwd").attr('value')!=text){
		$("#rcpwdTip").html("两次密码不同");
		$("#rcpwdTip").show();
		isCorrect = false;
	}
}
function checkCode(){
	codeOk = false;
	$("#codeTip").hide();
	var text = $("#ccode").attr('value');
	if(($("#ccode").attr('value') == "")){
		$("#codeTip").html("请输入验证码");
		$("#codeTip").show();
		isCorrect = false;
	}else {
		$.post("<%=ServerValue.getFrontContextPath()%>/checkRegData.do",{c_id:3,ccode:text},
				function callback(result){
					if(result=='error'){
						$("#codeTip").show();
						$("#codeTip").html("验证码错误，请重新输入");
						isCorrect = false;
					}else{
						codeOk = true;
					}
				},
				"json");
	}
}
</script>
</head>
<body>
<div id="reg_dialog" title="请同意并勾选會員协议" class="member-reg-alert" style="display:none">
<p>您必须同意先《耀点100會員协议》，<br />才能提交注册信息。</p>
<div align="center"><span style="text-align:center;"><a href="javascript:;" class="btn-mid" id="reg_dialog_commit">确定</a></span></div>
</div>
<div class="login-area">
<p id="notlogin" style="display:none;"><a href="javascript:;" id="tologin">登录</a></p>
<p id="islogin" style="display:none;">您好，<a href="/ecmall/member/myyaodian.do?hpp=Itpbar_1"><strong id="slid"></strong></a>&nbsp;<a href="javascript:;" id="tologout">退出</a></p>

</div>
    <div class="logo-area"><a href="/?hpp=Logo"><img src="/images/logo.gif" /></a></div>
  </div>
  <div id="main" class="member-reg mgm">
 <div><img src="/images/mgm/P05b_01.jpg" /><img src="/images/mgm/P05b_02.jpg" /><img src="/images/mgm/P05b_03.jpg" /><img src="/images/mgm/P05b_04.jpg" /></div>
  	<h3>耀点100会员注册</h3>
  	<img src="/images/union/union_regstep_1.gif" alt="注册流程1_填写信息" class="step-img" />
  	<s:form action="goreg.do" method="post" id="memberForm">
	<div class="m-regform">
   	   <ul>
           <li><div><label for="name">帐户名：</label></div><div><strong class="ipt-w20"><input type="text" name="loginID" id="loginID" value="${member.loginId}" maxlength="20"/></strong><span class="txt-gy">请用小写英文字母、中文、数字,长度2-10个汉字或4-20个字符。</span><br /><span id="loginIDTip" style="display:none" class="msg rn"></span></div></li>
           <li><div><label for="name">手机号码：</label></div><div><strong class="ipt-w20"><input type="text" name="mobile" id="mobile" value="${member.mobile}" maxlength="11" /></strong><span class="txt-gy">请输入11位手机号码</span><span style="display:block"><span id="mobileTip" style="display:none" class="msg rn"></span></span></div></li>
           <li><div><label for="name">邮箱：</label></div><div><strong class="ipt-w20"><input type="text" name="mail" id="mail" value="${member.tempEmail}" autocomplete="off"/></strong><span class="txt-gy">请输入您常用的邮箱，方便日后找回密码</span><br /><span id="mailTip" style="display:none" class="msg rn"></span></div></li>
           <li><div><label for="name">设置密码：</label></div><div><strong class="ipt-w20"><input type="password" name="pwd" id="pwd" maxlength="16"/></strong><span class="txt-gy" id="pwdHint">密码可由大小写英文字母、数字组成，长度6－16个字符。</span><br /><span id="pwdTip" style="display:none" class="msg rn"></span></div></li>
           <li><div><label for="name">再输入一遍密码：</label></div><div><strong class="ipt-w20"><input type="password" name="rcpwd" id="rcpwd" maxlength="16"/></strong><br /><span id="rcpwdTip" style="display:none" class="msg rn"></span></div></li>
           <li><div><label for="name">验证码：</label></div><div><strong class="ipt-w20"><input type="text" name="ccode" id="ccode" autocomplete="off"/></strong><img id="iv" name="iv"> <a href="javascript:;" id="chang_image">看不清？换张图片</a><br /><span id="codeTip" style="display:none" class="msg rn"></span></div></li>
        </ul>
        <p align="center"><input type="checkbox" id="is_read"/> 我已阅读并同意 《<a href="/help/10_agreement.html" target=_blank>耀点100会员协议</a>》</p>
        <p align="center">&nbsp;</p>
        <p align="center"><a href="javascript:;" id="submit_data" title="提交注册信息，进行注册下一步" class="btn-mid-14">同意会员协议，提交注册信息</a></p>
    </div>
    </s:form>
</div>
</body>
</html>